<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post an Article</title>
    <style>
        * {
            margin: 0;
        }

        .header {
            width: 100%;
            height: 60px;
            background-color: #369;
        }

        .content {
            width: 80%;
            margin: 20px auto;
        }

        select {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        .error{
            color: red;
        }


    </style>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>

<div class="header"></div>
<div class="row">
    <h3>添加文章</h3>
    <div class="col-md-6 col-md-offset-1 col-xm-6">
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div style="position: relative">
            <label for="">文章标题</label>
            <input type="text" name="title" class="form-control" style="width: 400px">
        </div>
        <div style="position: relative">
            <label for="">文章关键词设置</label>
            <input type="text" name="keywords" class="form-control", style="width: 400px">
        </div>
        <div style="position: relative">
            <p>内容(TinyMCE编辑器，支持拖放/粘贴上传图片) </p>
            <textarea name="article_content" id="article_content" cols="60" rows="20"></textarea>
        </div>
        <div style="position: relative">
            <p>文章分类</p>
            <select name="category" required="" id="id_consultant">
              <option value="" selected="">---------</option>
                {% for cat in category_list %}
                    <option value="{{ cat.pk }}">{{ cat.title }}</option>
                {% endfor %}

            </select>
        </div>
        <div style="position: relative">
            <p>文章标签</p>
            <select name="tags" id="" multiple="multiple">
                <option value="" selected="">---------</option>
                {% for tag in tag_list %}
                    <option value="{{ tag.pk }}">{{ tag.title }}</option>
                {% endfor %}
            </select>
        </div>
        <div style="position: relative">
            <p>上传文章主图（用于显示在列表页面）</p>
            <img src="/media/addArticleImage/default.jpg" class="thumbnail" width="360px" alt="" id="main-img">
            点击上传图片
            <p><input type="file" name="mainImage" id="uploadMainFile" ></p>
        </div>
        <script>
            $("#uploadMainFile").change(function () {
                //generate a File object
                var fileReader = new FileReader();
                //get avatar file
                fileReader.readAsDataURL(this.files[0]);
                fileReader.onload = function () {
                    // wait for read and load the image
                    $('#main-img').attr("src", fileReader.result);
                };
            });
        </script>
        <input type="submit" class="btn btn-info">
    </form>
    </div>
</div>

<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#article_content',{
                    width:"900",
                    height:"500px",
                    resizeType:0,
                    uploadJson:"/upload/",
                    extraFileUploadParams:{
                            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                    },
                    filePostName:"upload_img"

                });
        });
</script>

</body>
</html>